<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      layout:decorate="admin/layout/layout"
>

<head>
    <title>客户系统</title>
</head>

<body class="scroll-container">
<div layout:fragment="content">
    <div class="wrapper page-wrapper scrollable">
        <div class="page-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="plate">

                        <div class="plate-head  d-flex justify-content-between">
                            <div class="plate-title">客户系统列表</div>
                            <div class="plate-tools">
                                <a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter">高级搜索</a>
                            </div>
                        </div>

                        <div class="plate-body clearfix">
                            <form class="form-inline form-filter">
                                <div class="row m-0">
                                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                                        <input type="text" name="name" class="form-control" placeholder="客户名称">
                                        <input type="text" name="creator.id" class="form-control" placeholder="创建人">
                                    </div>
                                    <div class="row m-0">
                                        <div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
                                            <input name="createTime_start" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间起始">
                                            <span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
                                        </div>

                                        <div data-type="datetime-picker" class="input-group mb-2 mr-sm-2 mb-sm-0">
                                            <input name="createTime_endDate" type="text" class="form-control" readonly="" data-pick-time="false" data-format="yyyy-MM-dd" placeholder="创建时间截止">
                                            <span class="input-group-addon"><i class="" data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i></span>
                                        </div>

                                    </div>
                                </div>

                                <div id="advanced-filter" class="collapse w-100">
                                </div>

                                <div class="row m-0 mt-2 w-100">
                                    <input id="filterBtn" class="btn btn-primary mr-2" type="button" value="过滤">
                                    <input class="btn btn-secondary mr-2" type="reset" value="重置">
                                    <a data-toggle="collapse" href="#advanced-filter" aria-expanded="false" aria-controls="advanced-filter"
                                       style="padding-top: 12px; text-decoration: underline;">高级过滤</a>
                                </div>
                            </form>

                            <div id="customEditorForm">
                                <ul class="nav nav-tabs" id="customEditorForm_Tabs">
                                    <li class="nav-item">
                                        <a class="nav-link active" href="#baseInfo" data-toggle="tab" role="tab" aria-selected="true">基本信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#authAndScopeInfo" data-toggle="tab" role="tab" aria-selected="true">授权范围</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#tokenInfo" data-toggle="tab" role="tab" aria-selected="true">令牌时效</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#callbackUrlInfo" data-toggle="tab" role="tab" aria-selected="true">回调URL</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#smInfo" data-toggle="tab" role="tab" aria-selected="true">短信资源</a>
                                    </li>
                                </ul>

                                <div id="myTabContent1" class="tab-content">
                                    <div class="tab-pane in active" id="baseInfo">
                                        <div data-editor-template="logo"></div>
                                        <div data-editor-template="name"></div>
                                        <div data-editor-template="email"></div>
                                        <div data-editor-template="clientId"></div>
                                        <div data-editor-template="clientSecret"></div>
                                        <div data-editor-template="secretRequired"></div>
                                    </div>
                                    <div class="tab-pane fade" id="authAndScopeInfo">
                                        <div data-editor-template="authorizedGrantTypes"></div>
                                        <div data-editor-template="autoApprove"></div>
                                        <div data-editor-template="clientSystemScopes[].authScope.id"></div>
                                        <div data-editor-template="scoped"></div>
                                        <div data-editor-template="clientSystemResources[].authResource.id"></div>
                                    </div>
                                    <div class="tab-pane fade" id="tokenInfo">
                                        <div data-editor-template="accessTokenValiditySeconds"></div>
                                        <div data-editor-template="refreshTokenValiditySeconds"></div>
                                    </div>
                                    <div class="tab-pane fade" id="callbackUrlInfo">
                                        <div data-editor-template="registeredRedirectUri"></div>
                                        <div data-editor-template="logoutNotifyUrl"></div>
                                        <div data-editor-template="changedNotifyUrl"></div>
                                        <div data-editor-template="appDownloadUrl"></div>
                                    </div>
                                    <div class="tab-pane fade" id="smInfo">
                                        <div data-editor-template="smTotals"></div>
                                        <div data-editor-template="sendTotals"></div>
                                    </div>
                                </div>
                            </div>

                            <table id="dataTable" class="table responsive table-bordered table-hover" cellspacing="0" width="100%">
                                <thead>
                                <tr>
                                    <th class="all">
                                        <label class="custom-control custom-checkbox">
                                            <input id="check-all" type="checkbox" class="custom-control-input">
                                            <span class="custom-control-indicator"></span>
                                        </label>
                                    </th>
                                    <th>LOGO</th>
                                    <th class="all" data-priority="1">客户名称</th>
                                    <th>客户邮箱</th>
                                    <th>客户编号</th>
                                    <th>客户密钥</th>
                                    <th>密钥验证</th>
                                    <th>范围许可</th>
                                    <th>范围检查</th>
                                    <th>授权状态</th>
                                    <th>资源集合</th>
                                    <th>授权方式</th>
                                    <th>访问令牌周期</th>
                                    <th>刷新令牌周期</th>
                                    <th>注册后重定向</th>
                                    <th>变更通知地址</th>
                                    <th>登出通知地址</th>
                                    <th>App下载地址</th>
                                    <th>短信总条数</th>
                                    <th>已发送条数</th>
                                    <th>创建人</th>
                                    <th class="min-tablet-l">创建时间</th>
                                    <th data-priority="1">操作</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot></tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../../../static/asset/js/base.min.js" th:src="@{/asset/js/base.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/datatables.min.js" th:src="@{/asset/js/datatables.min.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/common/dataTables.ext.js" th:src="@{/asset/js/common/dataTables.ext.js}"></script>
    <script type="text/javascript" src="../../../static/asset/js/app.js" th:src="@{/asset/js/app.js}"></script>

    <script>
        $(function () {
            var editor = new $.fn.dataTable.Editor({
                ajax: './list/action',
                table: "#dataTable",
                template: '#customEditorForm',
                idSrc: 'id',
                fields: [
                    {name: 'id', type: 'hidden'},
                    {name: 'creator.id', type: 'hidden'},
                    {
                        label: 'LOGO:',
                        name: 'logo',
                        type: 'upload',
                        display: function (fileId) {
                            var result = '';
                            try {
                                var fileUrl = editor.file('files', fileId);
                                result = '<img src="' + fileUrl.webPath + '"/>';
                            } catch (e) {
                            }
                            return result;
                        },
                        fieldInfo: '<div style="color:orange">注意：图片成功上传后300秒内有效!</div>'
                    },
                    {label: '客户名称:', name: 'name'},
                    {label: '客户邮箱:', name: 'email'},
                    {label: '客户编号:', name: 'clientId'},
                    {label: '客户密钥:', name: 'clientSecret'},
                    {
                        label: '密钥验证:', name: 'secretRequired', type: 'select',
                        options: [
                            {label: '要验证密钥', value: true},
                            {label: '不验证密钥', value: false}
                        ],
                        def: true
                    },
                    {
                        label: '授权方式:',
                        name: 'authorizedGrantTypes',
                        type: 'select2',
                        select2Opt: {
                            placeholder: '请选择',
                            allowClear: true,
                            multiple: true,
                            ajax: {
                                url: '../client/grantTypes/select2'
                            }
                        },
                        fieldInfo: '<div style="color:orange">可多选</div>'
                    },
                    {
                        label: '授权状态:', name: 'autoApprove', type: 'select',
                        options: [
                            {label: '自动授权', value: true},
                            {label: '用户授权', value: false}
                        ],
                        def: false
                    },
                    {
                        label: '范围许可:',
                        name: 'clientSystemScopes[].authScope.id',
                        type: 'select2',
                        select2Opt: {
                            placeholder: '请选择',
                            allowClear: true,
                            multiple: true,
                            ajax: {
                                url: '../authscope/select2'
                            }
                        },
                        fieldInfo: '<div style="color:orange">可多选</div>'
                    },
                    {
                        label: '范围检查:', name: 'scoped', type: 'select',
                        options: [
                            {label: '要检查范围', value: true},
                            {label: '不检查范围', value: false}
                        ],
                        def: true
                    },
                    {
                        label: '资源集合:',
                        name: 'clientSystemResources[].authResource.id',
                        type: 'select2',
                        select2Opt: {
                            placeholder: '请选择',
                            allowClear: true,
                            multiple: true,
                            ajax: {
                                url: function () {
                                    var scopes = editor.field('clientSystemScopes[].authScope.id').val();
                                    var ids = "";
                                    for (var index in scopes) {
                                        ids += ("," + scopes[index]);
                                    }
                                    ids = ids ? ids.substring(1) : "0";
                                    return '../authresource/select2?authScope.id=' + ids;
                                }
                            },
                            templateSelection: function (data, container) {
                                return data ? data.text : "";
                            }
                        },
                        fieldInfo: '<div style="color:orange">可多选</div>'
                    },
                    {
                        label: '访问令牌:',
                        name: 'accessTokenValiditySeconds',
                        fieldInfo: '<div style="color:orange">访问令牌的有效时长，单位：秒</div>'
                    },
                    {
                        label: '刷新令牌:',
                        name: 'refreshTokenValiditySeconds',
                        fieldInfo: '<div style="color:orange">刷新令牌的有效时长，单位：秒</div>'
                    },

                    {label: '注册后重定向:', name: 'registeredRedirectUri'},

                    {label: '变更通知地址:', name: 'changedNotifyUrl'},

                    {label: '登出通知地址:', name: 'logoutNotifyUrl'},

                    {label: 'App下载地址:', name: 'appDownloadUrl'},

                    {label: '短信总条数:', name: 'smTotals'},

                    {label: '已发送条数:', name: 'sendTotals', type: 'readonly'}

                ]
            }).on('initCreate', function (e, o, action) {
                //创建时隐藏字段。
            }).on('initEdit', function (e, o, action) {
                //编辑时隐藏字段。
                //editor.fields('sendTotals').readonly();
            });

            // Edit record
            $('#dataTable').on('click', 'a.editor_edit', function (e) {
                e.preventDefault();

                editor.edit($(this).closest('tr'), {
                    title: '编辑记录',
                    buttons: {
                        label: '提交',
                        className: 'btn-primary',
                        fn: function () {
                            editor.submit();
                        }
                    }
                });
            });

            // Delete a record
            $('#dataTable').on('click', 'a.editor_remove', function (e) {
                e.preventDefault();

                editor.remove($(this).closest('tr'), {
                    title: '删除记录',
                    message: '确定删除该记录?',
                    buttons: {
                        label: '提交',
                        className: 'btn-danger',
                        fn: function () {
                            editor.submit();
                        }
                    }
                });
            });

            var table = $('#dataTable').DataTable({
                select: true,
                autoWidth: false,
                ajax: {
                    "url": './list/data', // ajax source
                    "type": 'post'
                },
                "buttons": [
                    {text: '新增', className: 'btn btn-primary', extend: "create", editor: editor},
                    {
                        text: '刷新',
                        className: 'btn btn-secondary btn-outline',
                        action: function (e, dt, node, config) {
                            dt.ajax.reload();
                        }
                    },
                    {text: '列显控制', className: 'btn btn-secondary', extend: "colvis", editor: editor},
                    {
                        extend: 'collection',
                        className: 'btn btn-secondary',
                        text: '<i class="fa fa-archive"></i> 导出 ',
                        buttons: ['csv', 'excel', 'pdf', {
                            extend: 'print',
                            text: '打印'
                        }]
                    }
                ],
                columns: [
                    {
                        data: "id",
                        orderable: false,
                        visible: true
                    },
                    {
                        data: "logo",
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<a target="_blank" href="' + data + '"><img style="width:20px; height:20px;" src="' + data + '"/></a>';
                        }
                    },
                    {
                        data: "name",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "email",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "clientId",
                        searchable: true,
                        visible: true
                    },
                    {
                        data: "clientSecret",
                        searchable: true,
                        visible: false
                    },
                    {
                        data: "secretRequired",
                        searchable: true,
                        visible: true,
                        render: function (data, type, row, meta) {
                            return data === true ? "要验证密钥" : "不验证密钥";
                        }
                    },
                    {
                        data: "clientSystemScopes[].authScope.id",
                        searchable: true,
                        visible: false,
                        render: function (data, type, row, meta) {
                            var result;
                            for(var i = 0; i < data.length; i++){
                                result = data[i] + " ";
                            }
                            return result;
                        }
                    },
                    {
                        data: "scoped",
                        searchable: true,
                        visible: true,
                        render: function (data, type, row, meta) {
                            return data === true ? "要检查范围" : "不检查范围";
                        }
                    },
                    {
                        data: "autoApprove",
                        searchable: true,
                        visible: true,
                        render: function (data, type, row, meta) {
                            return data === true ? "自动授权" : "用户授权";
                        }
                    },
                    {
                        data: "resourceIds",
                        searchable: true,
                        visible: false
                    },
                    {
                        data: "authorizedGrantTypes",
                        searchable: true,
                        visible: false
                    },
                    {
                        data: "accessTokenValiditySeconds",
                        searchable: true,
                        visible: false
                    }, {
                        data: "refreshTokenValiditySeconds",
                        searchable: true,
                        visible: false
                    },
                    {
                        data: "registeredRedirectUri",
                        searchable: false,
                        visible: false
                    },
                    {
                        data: "changedNotifyUrl",
                        searchable: false,
                        visible: false
                    },
                    {
                        data: "logoutNotifyUrl",
                        searchable: false,
                        visible: false
                    },
                    {
                        data: "appDownloadUrl",
                        searchable: false,
                        visible: false
                    },
                    {
                        data: "smTotals",
                        searchable: false,
                        visible: true
                    },
                    {
                        data: "sendTotals",
                        searchable: false,
                        visible: true
                    },
                    {
                        data: "creator",
                        searchable: false,
                        visible: true,
                        render: function (data, type, row, meta) {
                            return data ? data.username : "";
                        }
                    },
                    {
                        data: "createTime",
                        searchable: false,
                        visible: false
                    },
                    {
                        data: "id",
                        searchable: false,
                        orderable: false,
                        visible: true
                    }
                ],
                order: [1, "desc"],
                columnDefs: [
                    {
                        targets: [0],
                        render: function (data, type, row, meta) {
                            return '<label class="custom-control custom-checkbox">'
                                + '	<input type="checkbox" class="custom-control-input">'
                                + '	<span class="custom-control-indicator"></span>' + data
                                + '</label>'
                        }
                    },
                    {
                        targets: [-1],
                        render: function (data, type, row, meta) {
                            var result = '<a href="javascript:;" class="editor_edit">编辑</a>';
                            result += '&nbsp;|&nbsp;<a href="javascript:;" class="editor_remove">删除</a>';
                            return result;
                        }
                    }
                ]
            });

            table.ext.filter.form('.form-filter');
            table.ext.filter.submit('#filterBtn');
            table.ext.batchCheck('#check-all');

            /* $('#example').dataTable({
             "footerCallback": function( tfoot, data, start, end, display ) {
             var api = this.api();
             $( api.column(5).footer() ).html(
             api.column(5).data().reduce(function ( a, b ) {
             return App.floatVal(a) + App.floatVal(b);
             }, 0)
             );
             }
             });*/
        })
    </script>

    <!--{{> body-footer}}-->

</div>
</body>
</html>